import { View, Text } from "@tarojs/components";
import DoneIcon from "@/components/Icons/DoneIcon";
import DoneFillIcon from "@/components/Icons/DoneFillIcon";
import TimeIcon from "@/components/Icons/TimeIcon";

type Props = {
  set: number[];
  unit: string;
  setType: string;
  index: number;
  isDone: boolean;
};

const SetCell = ({ set, unit, setType, index, isDone, ...other }: Props) => {
  return (
    <View
      className={`start-plan-item-sets-item ${isDone ? "done" : ""}`}
      {...other}
    >
      <DoneFillIcon
        type="primary"
        size={1}
        style={{
          position: "absolute",
          right: "0",
          top: "0",
          opacity: isDone ? 1 : 0,
          transition: "opacity 0.3s ease-in-out",
        }}
      />

      <View className="set-wrapper">
        <View className="set-number">
          <Text>第 {index + 1} 组</Text>
        </View>
        <View className="set-value">
          <Text>
            {set[0]}
            {unit}
          </Text>
          <Text>
            {set[1]}
            {setType}
          </Text>
        </View>
      </View>
    </View>
  );
};

export default SetCell;
